<template>
  <div class="home">
    <v-Head></v-Head>
    <div class="title">
      <div class="left">
        <img src="@/assets/img_index/laba.png" alt="" /><span> 最新公告 </span>
      </div>
      <div class="right">
        <Scoll-active></Scoll-active>
      </div>
    </div>
    <div class="content">
      <div class="top">
        <div class="item">
          <div class="item_left">
            <img src="@/assets/img_index/user.png" alt="" />
          </div>
          <div class="item_right">
            <b>
              {{ this.system }}
            </b>
            <span> 系统用户数 </span>
          </div>
        </div>
        <div class="item">
          <div class="item_left">
            <img src="@/assets/img_index/file.png" alt="" />
          </div>
          <div class="item_right">
            <b>
              {{ this.order }}
            </b>
            <span> 计费订单数量 </span>
          </div>
        </div>
        <div class="item">
          <div class="item_left">
            <img src="@/assets/img_index/car.png" alt="" />
          </div>
          <div class="item_right">
            <b>
              {{ this.parking }}
            </b>
            <span> 车位总量 </span>
          </div>
        </div>
        <div class="item">
          <div class="item_left">
            <img src="@/assets/img_index/edit-box-fill.png" alt="" />
          </div>
          <div class="item_right">
            <b>
              {{ this.feedback }}
            </b>
            <span> 用户反馈数量 </span>
          </div>
        </div>
      </div>
      <div class="middle">
        <div class="item_1" id="item_1"></div>
        <div class="item_2"></div>
        <div class="item_3"></div>
      </div>
      <div class="bottom">
        <div class="item_1"></div>
        <div class="item_2">
          <el-table :data="tableData" style="width: 100%" height="220px">
            <el-table-column prop="repaircontent" label="维修内容" width="100">
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="scope.row.repaircontent"
                  placement="top-start"
                >
                  <span class="sp">{{ scope.row.repaircontent }}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column prop="createtime" label="保修时间" width="180">
              <template slot-scope="scope">
                <span>{{
                  scope.row.createtime.split("T")[0] +
                  " " +
                  scope.row.createtime.split("T")[1].split(".")[0]
                }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="resultstatus" label="状态">
              <template slot-scope="scope">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="`状态：${scope.row.resultstatus}`"
                  placement="top-start"
                >
                  <el-tag v-if="scope.row.resultstatus == 1" type="success"
                    >已修复</el-tag
                  >
                  <el-tag
                    v-if="
                      scope.row.resultstatus == 2 ||
                      scope.row.resultstatus == null
                    "
                    type="warning"
                    >待处理</el-tag
                  >
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>
          <div style="text-align: center">
            <el-pagination
              layout="prev, pager, next"
              :total="this.total"
              @current-change="getCurrentPage"
              :page-size="4"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vHead from "../components/header";
import ScollActive from "../components/index/ScollActive.vue";
export default {
  name: "index",
  data() {
    return {
      //表格数据
      tableData: null,
      pageNumber: 0,
      total: null,
      // 中间表3数据
      middleThree: [],
      // 中间表2数据
      middleTwo: {
        A: [],
        B: [],
        C: [],
        D: [],
      },
      //中间表1数据
      middleOne: {
        A: null,
        B: null,
        C: null,
        D: null,
      },
      //title数据
      system: "",
      order: "",
      parking: "",
      feedback: "",
    };
  },
  methods: {
    // 当前页
    getCurrentPage(val) {
      this.pageNumber = val - 1;
      this.getTableData();
    },
    // 表格数据
    getTableData() {
      this.$Axios({
        url: "poster/getRepairData",
        method: "get",
        data: {
          currPage: this.pageNumber,
          pageNum: 4,
        },
        success: (res) => {
          console.log(res, "res");
          this.tableData = res.data;
          this.total = res.total;
          console.log(this.total);
        },
      });
    },
    // 初始化下表格一
    chartsBottomOne() {
      let chartDom = document.querySelector(".home .content .bottom .item_1");
      let myChart = this.$echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: "用户当月访问情况",
        },
        tooltip: {
          trigger: "axis",
        },
        color: ["#1DD5AF"],
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: "none",
            },
            dataView: { readOnly: false },
            magicType: { type: ["line", "bar"] },
            restore: {},
            saveAsImage: {},
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: [
            "01",
            "02",
            "03",
            "04",
            "05",
            "06",
            "07",
            "08",
            "09",
            "10",
            "11",
            "12",
            "13",
            "14",
            "15",
            "16",
            "17",
            "18",
            "19",
            "20",
            "21",
            "22",
            "23",
            "24",
            "25",
            "26",
            "27",
            "28",
            "29",
            "30",
            "31",
          ],
        },
        yAxis: {
          type: "value",
        },
        legend: {
          data: ["用户访问量"],
        },
        series: [
          {
            data: [
              0, 2, 1, 4, 12, 130, 20, 80, 2, 1, 4, 90, 130, 130, 80, 92, 91,
              94, 120, 130, 120, 80, 92, 91, 94, 120, 130, 130, 80, 32, 91,
            ],
            type: "line",
            smooth: true,
            name: "用户访问量",
          },
        ],
      };

      option && myChart.setOption(option);
    },
    // 中间表格三数据
    async getMiddleThreeData() {
      // this.$Axios({
      //   url: "cost/getCostData",
      //   method: "get",
      //   data: {
      //     c_id: 7,
      //     currPage: 0,
      //     pageNum: 4,
      //   },
      //   success: (result) => {
      //     console.log(result,'resres')
      //     this.middleThree[0] = result.total;
      //   },
      // });

      // this.$Axios({
      //   url: "cost/getCostData",
      //   method: "get",
      //   data: {
      //     c_id: 8,
      //     currPage: 0,
      //     pageNum: 4,
      //   },
      //   success: (result) => {
      //     this.middleThree[1] = result.total;
      //   },
      // });
      // this.$Axios({
      //   url: "cost/getCostData",
      //   method: "get",
      //   data: {
      //     c_id: 9,
      //     currPage: 0,
      //     pageNum: 4,
      //   },
      //   success: (result) => {
      //     this.middleThree[2] = result.total;
      //   },
      // });
      // this.$Axios({
      //   url: "cost/getCostData",
      //   method: "get",
      //   data: {
      //     c_id: 10,
      //     currPage: 0,
      //     pageNum: 4,
      //   },
      //   success: (result) => {
      //     this.middleThree[3] = result.total;
      //   },
      // });
      // this.$Axios({
      //   url: "cost/getCostData",
      //   method: "get",
      //   data: {
      //     c_id: 11,
      //     currPage: 0,
      //     pageNum: 4,
      //   },
      //   success: (result) => {
      //     this.middleThree[4] = result.total;
      //   },
      // });
      // this.$Axios({
      //   url: "cost/getCostData",
      //   method: "get",
      //   data: {
      //     c_id: 12,
      //     currPage: 0,
      //     pageNum: 4,
      //   },
      //   success: (result) => {
      //     this.middleThree[5] = result.total;
      //   },
      // });
      // console.log(this.middleThree,'middleThree')
      // setTimeout(() => {
      //   this.chartsMiddleThree();
      // }, 2000);
      const [res1, res2, res3, res4, res5, res6] = await Promise.all([
        this.$axios.get("cost/getCostData", {
          params: {
            c_id: 7,
            currPage: 0,
            pageNum: 4,
          },
        }),
        this.$axios.get("cost/getCostData", {
          params: {
            c_id: 8,
            currPage: 0,
            pageNum: 4,
          },
        }),
        this.$axios.get("cost/getCostData", {
          params: {
            c_id: 9,
            currPage: 0,
            pageNum: 4,
          },
        }),
        this.$axios.get("cost/getCostData", {
          params: {
            c_id: 10,
            currPage: 0,
            pageNum: 4,
          },
        }),
        this.$axios.get("cost/getCostData", {
          params: {
            c_id: 11,
            currPage: 0,
            pageNum: 4,
          },
        }),
        this.$axios.get("cost/getCostData", {
          params: {
            c_id: 12,
            currPage: 0,
            pageNum: 4,
          },
        }),
      ]);
      this.middleThree[0] = res1.data.total;
      this.middleThree[1] = res2.data.total;
      this.middleThree[2] = res3.data.total;
      this.middleThree[3] = res4.data.total;
      this.middleThree[4] = res5.data.total;
      this.middleThree[5] = res6.data.total;

      this.chartsMiddleThree();
    },
    //初始化中间表格3
    chartsMiddleThree() {
      let chartDom = document.querySelector(".home .content .middle .item_3");
      let myChart = this.$echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: "缴费项目订单",
          left: "320px",
        },
        color: ["#339DFF"],

        legend: {
          data: ["计费项目"],
          left: "50px",
        },
        radar: {
          // shape: 'circle',
          indicator: [
            { name: "电费单", max: 10 },
            { name: "水费固定月单", max: 10 },
            { name: "水费按量单", max: 10 },
            { name: "天然气单", max: 10 },
            { name: "物业费单", max: 10 },
            { name: "宽带费单", max: 10 },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            areaStyle: {},
            data: [
              {
                value: this.middleThree,
                name: "计费项目",
                label: {
                  show: true,
                  position: "top",
                },
              },
            ],
          },
        ],
      };

      myChart.setOption(option);
    },
    // 中间表格2数据
    async getMiddleTwoData() {
      // //a区数据(车位)
      // this.$Axios({
      //   url: "/parking/getParkData",
      //   method: "get",
      //   data: {
      //     parkname: "A",
      //     currPage: "0",
      //     pageNum: "4",
      //   },
      //   success: (result) => {
      //     // console.log(result);
      //     this.middleTwo.A[0] = result.total;
      //   },
      // });
      // //a区数据(分配量)
      // this.$Axios({
      //   url: "/parking/getParkData",
      //   method: "get",
      //   data: {
      //     parkname: "A",
      //     parkstatus: "1",
      //     currPage: "0",
      //     pageNum: "4",
      //   },
      //   success: (result) => {
      //     // console.log(result);
      //     this.middleTwo.B[0] = result.total;
      //   },
      // });
      // //a区数据(缴费)
      // this.$Axios({
      //   url: "/parking/getParkOrder",
      //   method: "get",
      //   data: {
      //     parkname: "A",
      //     orderstatus: "1",
      //     currPage: "0",
      //     pageNum: "4",
      //   },
      //   success: (result) => {
      //     // console.log(result);
      //     this.middleTwo.C[0] = result.total;
      //   },
      // });
      // //b区数据(车位)
      // this.$Axios({
      //   url: "/parking/getParkData",
      //   method: "get",
      //   data: {
      //     parkname: "B",
      //     currPage: "0",
      //     pageNum: "4",
      //   },
      //   success: (result) => {
      //     // console.log(result);
      //     this.middleTwo.A[1] = result.total;
      //   },
      // });
      // //b区数据(分配量)
      // this.$Axios({
      //   url: "/parking/getParkData",
      //   method: "get",
      //   data: {
      //     parkname: "B",
      //     parkstatus: "1",
      //     currPage: "0",
      //     pageNum: "4",
      //   },
      //   success: (result) => {
      //     // console.log(result);
      //     this.middleTwo.B[1] = result.total;
      //   },
      // });
      // //b区数据(缴费)
      // this.$Axios({
      //   url: "/parking/getParkOrder",
      //   method: "get",
      //   data: {
      //     parkname: "B",
      //     orderstatus: "1",
      //     currPage: "0",
      //     pageNum: "4",
      //   },
      //   success: (result) => {
      //     // console.log(result);
      //     this.middleTwo.C[1] = result.total;
      //   },
      // });
      // //c区数据(车位)
      // this.$Axios({
      //   url: "/parking/getParkData",
      //   method: "get",
      //   data: {
      //     parkname: "C",
      //     currPage: "0",
      //     pageNum: "4",
      //   },
      //   success: (result) => {
      //     // console.log(result);
      //     this.middleTwo.A[2] = result.total;
      //   },
      // });
      // //c区数据(分配量)
      // this.$Axios({
      //   url: "/parking/getParkData",
      //   method: "get",
      //   data: {
      //     parkname: "C",
      //     parkstatus: "1",
      //     currPage: "0",
      //     pageNum: "4",
      //   },
      //   success: (result) => {
      //     // console.log(result);
      //     this.middleTwo.B[2] = result.total;
      //   },
      // });
      // //c区数据(缴费)
      // this.$Axios({
      //   url: "/parking/getParkOrder",
      //   method: "get",
      //   data: {
      //     parkname: "C",
      //     orderstatus: "1",
      //     currPage: "0",
      //     pageNum: "4",
      //   },
      //   success: (result) => {
      //     // console.log(result);
      //     this.middleTwo.C[2] = result.total;
      //   },
      // });
      // //d区数据(车位)
      // this.$Axios({
      //   url: "/parking/getParkData",
      //   method: "get",
      //   data: {
      //     parkname: "D",
      //     currPage: "0",
      //     pageNum: "4",
      //   },
      //   success: (result) => {
      //     // console.log(result);
      //     this.middleTwo.A[3] = result.total;
      //   },
      // });
      // //d区数据(分配量)
      // this.$Axios({
      //   url: "/parking/getParkData",
      //   method: "get",
      //   data: {
      //     parkname: "D",
      //     parkstatus: "1",
      //     currPage: "0",
      //     pageNum: "4",
      //   },
      //   success: (result) => {
      //     // console.log(result);
      //     this.middleTwo.B[3] = result.total;
      //   },
      // });
      // //d区数据(缴费)
      // this.$Axios({
      //   url: "/parking/getParkOrder",
      //   method: "get",
      //   data: {
      //     parkname: "D",
      //     orderstatus: "1",
      //     currPage: "0",
      //     pageNum: "4",
      //   },
      //   success: (result) => {
      //     // console.log(result);
      //     this.middleTwo.C[3] = result.total;
      //   },
      // });
      // // console.log(this.middleTwo, "middleTwo");
      // setTimeout(() => {
      //   this.chartsMiddleTwo();
      // }, 1500);
      const [
        res_A0,
        res_B0,
        res_C0,
        res_A1,
        res_B1,
        res_C1,
        res_A2,
        res_B2,
        res_C2,
        res_A3,
        res_B3,
        res_C3,
      ] = await Promise.all([
        //a区数据(车位)
        this.$axios.get("parking/getParkData", {
          params: {
            parkname: "A",
            currPage: "0",
            pageNum: "4",
          },
        }),
        //a区数据(分配量)
        this.$axios.get("parking/getParkData", {
          params: {
            parkname: "A",
            parkstatus: "1",
            currPage: "0",
            pageNum: "4",
          },
        }),
        //a区数据(缴费)
        this.$axios.get("parking/getParkOrder", {
          params: {
            parkname: "A",
            orderstatus: "1",
            currPage: "0",
            pageNum: "4",
          },
        }),
        //b区数据(车位)
        this.$axios.get("parking/getParkData", {
          params: {
            parkname: "B",
            currPage: "0",
            pageNum: "4",
          },
        }),
        //b区数据(分配量)
        this.$axios.get("parking/getParkData", {
          params: {
            parkname: "B",
            parkstatus: "1",
            currPage: "0",
            pageNum: "4",
          },
        }),
        //b区数据(缴费)
        this.$axios.get("parking/getParkOrder", {
          params: {
            parkname: "B",
            orderstatus: "1",
            currPage: "0",
            pageNum: "4",
          },
        }),
        //c区数据(车位)
        this.$axios.get("parking/getParkData", {
          params: {
            parkname: "C",
            currPage: "0",
            pageNum: "4",
          },
        }),
        //c区数据(分配量)
        this.$axios.get("parking/getParkData", {
          params: {
            parkname: "C",
            parkstatus: "1",
            currPage: "0",
            pageNum: "4",
          },
        }),
        //c区数据(缴费)
        this.$axios.get("parking/getParkOrder", {
          params: {
            parkname: "C",
            orderstatus: "1",
            currPage: "0",
            pageNum: "4",
          },
        }),
        //d区数据(车位)
        this.$axios.get("parking/getParkData", {
          params: {
            parkname: "D",
            currPage: "0",
            pageNum: "4",
          },
        }),
        //d区数据(分配量)
        this.$axios.get("parking/getParkData", {
          params: {
            parkname: "D",
            parkstatus: "1",
            currPage: "0",
            pageNum: "4",
          },
        }),
        //d区数据(缴费)
        this.$axios.get("parking/getParkOrder", {
          params: {
            parkname: "D",
            orderstatus: "1",
            currPage: "0",
            pageNum: "4",
          },
        }),
      ]);

      this.middleTwo.A[0] = res_A0.data.total;
      this.middleTwo.B[0] = res_B0.data.total;
      this.middleTwo.C[0] = res_C0.data.total;
      this.middleTwo.A[1] = res_A1.data.total;
      this.middleTwo.B[1] = res_B1.data.total;
      this.middleTwo.C[1] = res_C1.data.total;
      this.middleTwo.A[2] = res_A2.data.total;
      this.middleTwo.B[2] = res_B2.data.total;
      this.middleTwo.C[2] = res_C2.data.total;
      this.middleTwo.A[3] = res_A3.data.total;
      this.middleTwo.B[3] = res_B3.data.total;
      this.middleTwo.C[3] = res_C3.data.total;
      this.chartsMiddleTwo()
    },
    //初始化中间第二个表
    chartsMiddleTwo() {
      let chartDom = document.querySelector(".home .content .middle .item_2");
      let myChart = this.$echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: "车位数/已分配量/已缴费",
        },
        color: ["#5470C6", "#91CC75", "#DDB7FA"],
        xAxis: {
          type: "category",
          data: ["A区车位", "B区车位", "C区车位", "D区车位"],
        },
        yAxis: {
          type: "value",
        },
        legend: {
          orient: "horizontal",
          left: "200px",
        },
        series: [
          {
            name: "车位数",
            type: "bar",
            data: this.middleTwo.A,
            label: {
              show: true,
              position: "top",
            },
          },
          {
            name: "已分配量",
            type: "bar",
            data: this.middleTwo.B,
            label: {
              show: true,
              position: "top",
            },
          },
          {
            name: "已缴费",
            type: "bar",
            data: this.middleTwo.C,
            label: {
              show: true,
              position: "top",
            },
          },
        ],
      };

      myChart.setOption(option)
    },
    //中间表1数据
    async getMiddleOneData() {
      // this.$Axios({
      //   url: "/house/searchList",
      //   method: "get",
      //   data: {
      //     unitname: "A",
      //     currPage: "1",
      //     pageNum: "4",
      //   },
      //   success: (result) => {
      //     // console.log(result);
      //     this.middleOne.A = result.total;
      //   },
      // });

      // this.$Axios({
      //   url: "/house/searchList",
      //   method: "get",
      //   data: {
      //     unitname: "B",
      //     currPage: "1",
      //     pageNum: "4",
      //   },
      //   success: (result) => {
      //     // console.log(result);
      //     this.middleOne.B = result.total;
      //   },
      // });
      // this.$Axios({
      //   url: "/house/searchList",
      //   method: "get",
      //   data: {
      //     unitname: "C",
      //     currPage: "1",
      //     pageNum: "4",
      //   },
      //   success: (result) => {
      //     // console.log(result);
      //     this.middleOne.C = result.total;
      //   },
      // });
      // this.$Axios({
      //   url: "/house/searchList",
      //   method: "get",
      //   data: {
      //     unitname: "D",
      //     currPage: "1",
      //     pageNum: "4",
      //   },
      //   success: (result) => {
      //     // console.log(result);
      //     this.middleOne.D = result.total;
      //   },
      // });
      // // console.log(this.middleOne, "one");
      // setTimeout(() => {
      //   this.chartsMiddleOne();
      // }, 1500);
      try {
        const [
          { data: resultA }, // 对应A单元结果
          { data: resultB }, // 对应B单元结果
          { data: resultC }, // 对应C单元结果
          { data: resultD }, // 对应D单元结果
        ] = await Promise.all([
          this.$axios.get("/house/searchList", {
            params: { unitname: "A", currPage: "1", pageNum: "4" },
          }),
          this.$axios.get("/house/searchList", {
            params: { unitname: "B", currPage: "1", pageNum: "4" },
          }),
          this.$axios.get("/house/searchList", {
            params: { unitname: "C", currPage: "1", pageNum: "4" },
          }),
          this.$axios.get("/house/searchList", {
            params: { unitname: "D", currPage: "1", pageNum: "4" },
          }),
        ]);

        // 统一赋值操作
        this.middleOne = {
          A: resultA.total,
          B: resultB.total,
          C: resultC.total,
          D: resultD.total,
        };
        this.chartsMiddleOne();
      } catch (error) {
        console.error("请求出错", error);
      }
    },
    //初始化中间第1个表
    chartsMiddleOne() {
      let chartDom = document.getElementById("item_1");
      // console.log(chartDom, "ss");
      let myChart = this.$echarts.init(chartDom);
      let option;
      option = {
        color: ["#D8ECFF", "#B0F5AA", "#339DFF", "#F5DE6C"],
        title: {
          text: "小区分布统计",
          subtext: "",
          left: "center",
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)",
        },
        toolbox: {
          show: true,
          feature: {
            mark: { show: true },
            dataView: { show: true, readOnly: false },
            restore: { show: true },
            saveAsImage: { show: true },
          },
        },
        legend: {
          orient: "vertical",
          left: "left",
        },
        series: [
          {
            name: "小区分布",
            type: "pie",
            radius: "50%",
            data: [
              { value: this.middleOne.A, name: "A区" },
              { value: this.middleOne.B, name: "B区" },
              { value: this.middleOne.C, name: "C区" },
              { value: this.middleOne.D, name: "D区" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      // console.log(option, "option");
      option && myChart.setOption(option);
    },
    //title数据
    handleDetail() {
      // this.loading = true;
      //第一个
      this.$Axios({
        url: "users/getUsersData",
        method: "get",
        data: {
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.system = result.total;
        },
      });
      //第二个
      this.$Axios({
        url: "cost/getPayMessage",
        method: "get",
        data: {
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.order = result.total;
          // console.log(this.order);
        },
      });
      //第三个
      this.$Axios({
        url: "parking/getParkOrder",
        method: "get",
        data: {
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          this.parking = result.total;
        },
      });
      //第四个
      this.$Axios({
        url: "poster/getFeedBack",
        method: "get",
        data: {
          currPage: 0,
          pageNum: 4,
        },
        success: (result) => {
          // console.log("result", result);
          this.feedback = result.total;
        },
      });
    },
  },
  components: {
    vHead,
    ScollActive,
  },
  created() {
    this.handleDetail();
    this.getTableData();
  },
  mounted() {
    this.getMiddleOneData();
    this.getMiddleTwoData();
    this.getMiddleThreeData();
    this.chartsBottomOne();
  },
};
</script>

<style lang="scss" scoped>
.home {
  .title {
    padding-top: 60px;
    padding-left: 10px;
    display: flex;
    flex-direction: row;
    // background-color: #fff;
    .left {
      padding-top: 20px;
      color: #1296db;

      img {
        width: 20px;
        vertical-align: middle;
      }
    }

    .right {
      width: 1260px;
    }
  }
  .content {
    background-color: #f0f0f0;
    padding: 20px;
    .top {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .item {
        width: 22%;
        height: 120px;
        background-color: #fff;
        border-radius: 5px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        box-shadow: 0px 0px 14px #cccccc;
        img {
          width: 47px;
        }
        .item_right {
          display: flex;
          flex-direction: column;
          padding-right: 30px;

          b {
            font-size: 30px;
          }
        }
      }
    }
    .middle {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      margin-top: 20px;

      > div {
        width: 30%;
        height: 300px;
        background-color: #fff;
        padding: 10px;
        border-radius: 10px;
        display: flex;
        justify-content: center;
        box-shadow: 0px 0px 14px #cccccc;
      }
    }
    .bottom {
      margin-top: 20px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;

      .item_1 {
        box-sizing: border-box;
        background-color: #fff;
        width: 72%;
        height: 320px;
        border-radius: 10px;
        box-shadow: 0px 0px 14px #cccccc;
        padding: 10px;
      }
      .item_2 {
        box-sizing: border-box;
        background-color: #fff;
        width: 25%;
        height: 320px;
        border-radius: 10px;
        box-shadow: 0px 0px 14px #cccccc;
        padding: 10px;
        padding-top: 40px;
        .el-table {
          .el-table__body {
            .el-table__row {
              .cell {
                .sp {
                  display: block;
                  width: 80px;
                  overflow: hidden; /* 隐藏超出部分 */
                  white-space: nowrap; /* 禁止换行 */
                  text-overflow: ellipsis; /* 使用省略号表示被隐藏的文本 */
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>